import React from 'react';
import { Map, InfoWindow } from 'react-amap';

import logo from './logo.svg';
import './App.css';

const YOUR_AMAP_KEY = '99aab54dabe96e3cdd0f20423dfc7e63';
const VERSION = '1.4.0';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      info: 'Hello React JS',
      position: {
        longitude: 120,
        latitude: 30
      },
      visible: true,
      size: {
        width: 400,
        height: 300,
      },
      offset: [0, 0],
      value: 1,
    };

    this.windowEvents = {
      created: (iw) => {console.log(iw)},
      open: () => {console.log('InfoWindow opened')},
      close: () => {console.log('InfoWindow closed')},
      change: () => {console.log('InfoWindow prop changed')},
    };
  }

  componentWillMount() {
    // add meta
    this.addMetaTag();
  }

  addMetaTag = () => {
    const metaTags = [
      {
        key: 'HTTP-EQUIV',
        value: 'pragma',
        content: 'no-cache'
      },
      {
        key: 'HTTP-EQUIV',
        value: 'Cache-Control',
        content: 'no-cache, must-revalidate'
      },
      {
        key: 'HTTP-EQUIV',
        value: 'expires',
        content: '0'
      }
    ];

    const headItem = document.head;
    metaTags.forEach(element => {
      if (!this.isMetaTagExist(element)) {
        let oMeta = document.createElement('meta');
        oMeta.setAttribute(element.key, element.value);
        oMeta.content = element.content;
        headItem.appendChild(oMeta)
      }
    });
  }

  isMetaTagExist = (tag) => {
    console.log('isMetaTagExist', tag);
    const metaTag = document.getElementsByTagName('meta');
    for (let i = 0; i < metaTag.length; i++) {
      const httpEquiv = metaTag[i].httpEquiv;
      if (httpEquiv === tag.value) {
        console.log('tag exist');
        return true;
      }
    }
    return false;
  }

  test = () => {
    let jsonStr = `[
                        {
                            "deviceId": 250,
                            "ownerCode": "044043225969",
                            "analogData": 0.018
                        },
                        {
                            "deviceId": 250,
                            "ownerCode": "044043225969",
                            "analogData": 0.017
                        },
                        {
                            "deviceId": 250,
                            "ownerCode": "044043225969",
                            "analogData": 0.024
                        }
                    ]`;
    let myArr = JSON.parse(jsonStr);
    // console.log('test', myArr.length);
    let myObj = {};
    myArr.map((item, idx) => {
      // console.log(idx, item);
      for (const key in item) {
        if (item.hasOwnProperty(key)) {
          const value = item[key];
          // console.log(key, value);
          if (idx === 0) {
            myObj[key] = [];
          }
          myObj[key][idx] = value;
        }
      }
      return null;
    });
    console.log('haha', '\n', JSON.stringify(myObj), '\n', myObj);
  }

  changeOffset(){
    this.setState({
      offset: [Math.random() * 10, Math.random() * 10]
    })
  }
  
  resetOffset(){
    this.setState({
      offset: [0, 0]
    })
  }
  
  changeSize(){
    this.setState({
      size: {
        width: 200 + Math.random() * 20,
        height: 140 + Math.random() * 20,
      }
    })
  }
  
  changeValue(){
    this.setState({
      value: this.state.value + 1,
    });
  }

  toggleVisible() {
    this.setState({
      visible: !this.state.visible
    })
  }
   
  randomPosition() {
    this.setState({
      position: {
        longitude: 120 + Math.random() * 20,
        latitude: 30 + Math.random() * 20,
      }
    })
  }

  render() {
    const html = `<div><h4>Greetings</h4><p>This is content of this info window</p><p>Click 'Change Value' Button: ${this.state.value}</p></div>`;
    
    return (
      <div className="App">
        {/* <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p onClick={() => {this.test()}}>{this.state.info}</p>
        </header> */}
        <header className="app-header">
          <p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
        </header>
        <div className="amap">
          <Map amapkey={YOUR_AMAP_KEY} version={VERSION}>
            <InfoWindow
              position={this.state.position}
              visible={this.state.visible}
              isCustom={false}
              content={html}
              size={this.state.size}
              offset={this.state.offset}
              events={this.windowEvents}
            />
          </Map>
        </div>
        <button onClick={() => { this.toggleVisible() }}>Toggle Visible</button>
        <button onClick={() => { this.randomPosition() }}>Random Position</button>
        <button onClick={() => { this.changeValue() }}>Change Value</button>
        <button onClick={() => { this.changeOffset() }}>Change Offset</button>
        <button onClick={() => { this.resetOffset() }}>Restore Offset</button>
        <button onClick={() => { this.changeSize() }}>Change Size</button>
      </div>
    )
  }
}


export default App;
